<!--
 * 功能选择按钮组组件
 * 功能：提供网页搜索、学术搜索、智能问答、内容创作四种模式的切换
 * 作者：MetasoCreator Team
 * 创建时间：2025-01-19
 * 修改时间：2025-01-19
-->

<template>
  <div class="function-buttons">
    <div class="buttons-container">
      <el-button-group class="mode-buttons">
        <el-button
          v-for="mode in modes"
          :key="mode.value"
          :type="activeMode === mode.value ? 'primary' : 'default'"
          :class="{
            'active': activeMode === mode.value,
            'mode-button': true
          }"
          @click="handleModeChange(mode.value)"
        >
          <el-icon class="mode-icon">
            <component :is="mode.icon" />
          </el-icon>
          <span class="mode-label">{{ mode.label }}</span>
        </el-button>
      </el-button-group>
    </div>
    
    <!-- 模式描述 -->
    <div class="mode-description">
      <el-text class="description-text" type="info">
        {{ currentModeDescription }}
      </el-text>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, markRaw } from 'vue'
import {
  Search,
  Document,
  ChatDotRound,
  EditPen
} from '@element-plus/icons-vue'

// Props
const props = defineProps({
  activeMode: {
    type: String,
    default: 'web_search'
  }
})

// Emits
const emit = defineEmits(['update:activeMode', 'mode-change'])

// 模式配置 - 使用markRaw包装图标组件避免响应式转换
const modes = ref([
  {
    value: 'web_search',
    label: '网页搜索',
    icon: markRaw(Search),
    description: '搜索最新的网络信息，获取实时资讯和热点内容'
  },
  {
    value: 'academic_search',
    label: '学术搜索',
    icon: markRaw(Document),
    description: '查找学术论文、研究报告和专业文献资料'
  },
  {
    value: 'qa',
    label: '智能问答',
    icon: markRaw(ChatDotRound),
    description: '回答各种问题，提供详细解释和专业建议'
  },
  {
    value: 'content_creation',
    label: '内容创作',
    icon: markRaw(EditPen),
    description: '协助创作文章、报告、方案等各类文本内容'
  }
])

// 计算属性
const currentModeDescription = computed(() => {
  const currentMode = modes.value.find(mode => mode.value === props.activeMode)
  return currentMode ? currentMode.description : ''
})

// 方法
const handleModeChange = (mode) => {
  if (mode !== props.activeMode) {
    emit('update:activeMode', mode)
    emit('mode-change', mode)
  }
}
</script>

<style scoped>
.function-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.buttons-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.mode-buttons {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mode-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  transition: all 0.3s ease;
  font-weight: 500;
  min-width: 120px;
  justify-content: center;
}

.mode-button:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  transform: translateY(-1px);
}

.mode-button.active {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.mode-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.mode-label {
  font-size: 14px;
  white-space: nowrap;
}

.mode-description {
  text-align: center;
  padding: 0 20px;
}

.description-text {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .mode-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .mode-button {
    min-width: calc(50% - 4px);
    padding: 10px 12px;
  }
  
  .mode-label {
    font-size: 13px;
  }
  
  .mode-icon {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .mode-button {
    min-width: 100%;
    padding: 12px 16px;
  }
  
  .mode-buttons {
    flex-direction: column;
    gap: 6px;
  }
  
  .mode-description {
    padding: 0 10px;
  }
}

/* 暗色主题适配 */
:root[data-theme="dark"] .mode-button {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

:root[data-theme="dark"] .mode-button:hover {
  background: var(--color-primary-dark);
  color: var(--color-primary-light);
}

:root[data-theme="dark"] .mode-button.active {
  background: var(--color-primary);
  color: white;
}

:root[data-theme="dark"] .mode-buttons {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 动画效果 */
.mode-button {
  position: relative;
  overflow: hidden;
}

.mode-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.mode-button:hover::before {
  left: 100%;
}

.mode-button.active::before {
  display: none;
}
</style>